<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据源管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/css/element-ui.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/vue.js"></script>
    <!-- 引入element-ui js-->
    <script src="static/js/element-ui.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="static/js/config.js"></script>

</head>

<body>
<div id="app" class="topDiv">

    <div class="topFlexStartDiv" >
        <div>
            <template>
                数据库类型:
                <el-select v-model="typeValue" clearable placeholder="请选择" @change="onClick">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>
        <div class="marginLeft40px">
            <el-button type="primary" @click="datasourceFormVisible = true">新增</el-button>
        </div>
        <div class="marginLeft40px">
            <el-button type="success" @click="onClick()">查询</el-button>
        </div>
    </div>

    <div class="topTabDiv">
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="datasourceName"
                        label="数据源名称"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="datasourceCode"
                        label="数据源唯一编码"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="数据源类型"
                        width="300">
                    <template slot-scope="scope">
                        {{optionsMap[scope.row.type]}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ip"
                        label="数据源ip"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="port"
                        label="数据源端口"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="数据源账号"
                >
                </el-table-column>
            </el-table>
        </template>
    </div>

    <el-dialog title="新增" :visible.sync="datasourceFormVisible">
        <el-form :model="datasourceForm" :rules="datasourceFormRules" ref="datasourceForm" class="myform">
            <div class="flexCenterDiv">
                <el-form-item label="数据源名称:" :label-width="formLabelWidth" prop="datasourceName">
                    <el-input v-model="datasourceForm.datasourceName" autocomplete="off" class="myInput"></el-input>
                </el-form-item>
                <el-form-item label="数据源唯一编码:" :label-width="formLabelWidth" prop="datasourceCode">
                    <el-input v-model="datasourceForm.datasourceCode" autocomplete="off" class="myInput"></el-input>
                </el-form-item>
            </div>
            <div class="flexCenterDiv">
                <el-form-item label="数据源ip:" :label-width="formLabelWidth" prop="ip">
                    <el-input v-model="datasourceForm.ip" autocomplete="off" class="myInput"></el-input>
                </el-form-item>
                <el-form-item label="数据源端口:" :label-width="formLabelWidth" prop="port">
                    <el-input v-model="datasourceForm.port" autocomplete="off" class="myInput"></el-input>
                </el-form-item>
            </div>

            <div class="flexCenterDiv">
                <el-form-item label="用户名:" :label-width="formLabelWidth">
                    <el-input v-model="datasourceForm.username" autocomplete="off" class="myInput"></el-input>
                </el-form-item>
                <el-form-item label="密码:" :label-width="formLabelWidth">
                    <el-input v-model="datasourceForm.password" autocomplete="off" class="myInput"></el-input>
                </el-form-item>
            </div>

            <div class="flexMarginLeftDiv">
                <el-form-item label="数据源类型:" :label-width="formLabelWidth" prop="type">
                    <el-select v-model="datasourceForm.type" placeholder="请选择类型" class="myInput">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button typ="success" @click="testConnect()">测试链接</el-button>
            <el-button type="primary" @click="addDatasource()">
                保存
            </el-button>
        </div>
    </el-dialog>

</div>

</body>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [{
                    datasourceName: '',
                    datasourceCode: '',
                    ip: '',
                    password: '',
                    port: '',
                    type: '',
                    username: ''
                }],
                options: [],
                typeValue: '',
                datasourceForm: {
                    datasourceName: '',
                    datasourceCode: '',
                    ip: '',
                    port: '',
                    password: '',
                    type: '',
                    username: ''
                },
                datasourceFormVisible: false,
                datasourceFormRules: {
                    datasourceName: [{required: true, message: "数据源名称不能为空", trigger: "blur"}],
                    datasourceCode: [{required: true, message: "数据源唯一编码不能为空", trigger: "blur"}],
                    ip: [{required: true, message: "数据源ip不能为空", trigger: "blur"}],
                    port: [{required: true, message: "数据源端口不能为空", trigger: "blur"}],
                    type: [{required: true, message: "数据源类型不能为空", trigger: "blur"}]
                },
                datasourceOptions: [
                    {
                        value: ''
                    }
                ],
                formLabelWidth: '160px'
            }
        },
        computed: {
            optionsMap() {
                return this.options.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            }
        },
        methods: {
            async onClick() {
                const result = await axios.get(BASE_URL + '/api/datasource/?type=' + this.typeValue);
                if (result.data.code == 0) {
                    this.tableData = result.data.data;
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async testConnect() {
                this.datasourceOptions = [];
                const result = await axios.post(BASE_URL + '/api/datasource/connect', this.datasourceForm);
                if (result.data.code == 0) {
                    let databases = result.data.data;
                    if(null == databases){
                        this.$message.success(result.data.message);
                        return ;
                    }
                    let datasourceOptions = this.datasourceOptions;
                    databases.forEach(function (item) {
                        let datasourceOption = {};
                        datasourceOption.value = item;
                        datasourceOptions.push(datasourceOption);
                    });
                    this.$message.success(result.data.message);
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async addDatasource() {
                const result = await axios.post(BASE_URL + '/api/datasource/', this.datasourceForm);
                if (result.data.code == 0) {
                    this.$message.success(result.data.message);
                    this.onClick();
                } else {
                    this.$message.error(result.data.message);
                }

                this.datasourceFormVisible = false;
                this.datasourceOptions = [];
                this.datasourceForm = {};
            },
            async getDatasourceTypeList() {
                const result = await axios.get(BASE_URL + '/api/enum/datasource');
                if (result.data.code == 0) {
                    let options = this.options;
                    let data = result.data.data;
                    data.forEach(function (item) {
                        let option = {};
                        option.value = item.type;
                        option.label = item.name;
                        options.push(option);
                    });
                } else {
                    this.$message.error(result.data.message);
                }
            }
        },
        created: function () {
            this.onClick();
            this.getDatasourceTypeList();
        }
    });

</script>

</html>